<template>
    <div class="baby">
        <h3>教师助手管理</h3>
        <div class="button">
            <el-button @click="updatePasswordDialogVisible = true">修改密码</el-button>
            <el-button @click="dialogVisible = true">添加助手</el-button>
            <el-button @click="dialogVisible_clearStudent = true">清空学生数据</el-button>
        </div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column type="index" label="序号">
            </el-table-column>
            <el-table-column prop="username" label="姓名">
            </el-table-column>
            <el-table-column prop="userNumber" label="账号">
            </el-table-column>
            <el-table-column label="级别">
                <template slot-scope="scope">
                    {{scope.row.level === 1?"教师":"助手"}}
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <!-- 重置密码 -->
                    <el-button type="warning" size="mini" @click="resetPassword(scope.row.id)">重置</el-button>
                    <!-- 删除助手 -->
                    <el-button type="danger" size="mini"
                        @click="deleteStudent(scope.row.id,scope.row.username)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="添加助手" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <el-input placeholder="请输入姓名" v-model="param.username">
                <template slot="prepend">姓名：</template>
            </el-input>
            <br>
            <el-input placeholder="请输入账号" v-model="param.userNumber">
                <template slot="prepend">账号：</template>
            </el-input>
            <br>
            <span>默认密码是 123456</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose()">取 消</el-button>
                <el-button type="primary" @click="addteacher()">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 修改密码对话框 -->
        <el-dialog title="修改密码" :visible.sync="updatePasswordDialogVisible" width="30%"
            :before-close="updatePasswordhandleClose">
            <el-form ref="form" :model="editPassworddata" :rules="rules" label-width="120px">
                <el-form-item label="原密码" prop="oldPassword">
                    <el-input v-model="editPassworddata.oldPassword" type="password"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newPassword1">
                    <el-input v-model="editPassworddata.newPassword1" type="password"
                        validate-trigger="change"></el-input>
                </el-form-item>
                <el-form-item label="确认新密码" prop="newPassword2">
                    <el-input v-model="editPassworddata.newPassword2" type="password"
                        validate-trigger="change"></el-input>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="updatepassword()">提 交</el-button>
            </span>
        </el-dialog>

        <!-- 清除全部学生数据 -->
        <el-dialog title="清空数据" :visible.sync="dialogVisible_clearStudent" width="30%">
            <span style="color: red; font-size: 22px;">这会清空学生所有数据，请确保学生成绩等数据已经下载完毕!!!</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible_clearStudent = false">取 消</el-button>
                <el-button type="danger" @click="clearStudent">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            var validatePassword = (rule, value, callback) => {
                if (value !== this.editPassworddata.newPassword1) {
                    callback(new Error('两次输入的新密码不一致'));
                } else {
                    callback();
                }
            };
            return {
                dialogVisible_clearStudent:false,
                updatePasswordDialogVisible: false,
                dialogVisible: false,
                tableData: null,
                param: {
                    userNumber: null,
                    username: null
                },
                // 修改密码的数据
                editPassworddata: {
                    oldPassword: '',
                    newPassword1: '',
                    newPassword2: ''
                },
                // 表单验证规则
                rules: {
                    oldPassword: [
                        { required: true, message: '请输入原密码', trigger: 'blur' },
                    ],
                    newPassword1: [
                        { required: true, message: '请输入新密码', trigger: 'blur' },
                        { min: 6, message: '最少6个字符', trigger: 'blur' }
                    ],
                    newPassword2: [
                        { required: true, validator: validatePassword, trigger: 'change' }
                    ],
                },
            }
        },
        created() {
            this.getTeachers()
        },

        methods: {
            // 获取教师信息
            async getTeachers() {
                const { data: res } = await this.$axios.get("/getTeachers")
                if (res.code === 200) {
                    this.tableData = res.data
                }
            },
            // 重置助手密码
            async resetPassword(id) {
                const { data: res } = await this.$axios.get("/resetTeacherPassword", {
                    params: {
                        id: id
                    }
                })
                if (res.code === 200) {
                    return this.$message.success("重置成功")
                } if (res.code === 201) {
                    return this.$message("无权限")
                }
                return this.$message.error("网络错误")
            },
            // 删除助手
            async deleteStudent(id, username) {
                const { data: res } = await this.$axios.get("/deleteTeacher", {
                    params: {
                        id: id
                    }
                })
                if (res.code === 200) {
                    this.getTeachers()
                    return this.$message.success("删除成功")
                } if (res.code === 201) {
                    return this.$message("无权限")
                }
                return this.$message.error("网络错误")
            },

            // 修改密码框关闭前的操作
            updatePasswordhandleClose() {
                // 重置
                this.$refs.form.resetFields()
                this.updatePasswordDialogVisible = false
            },
            // 修改密码
            async updatepassword() {
                this.$refs.form.validate(async valid => {
                    if (!valid) return;
                    if (this.editPassworddata.oldPassword === this.editPassworddata.newPassword1) {
                        return this.$message.error('新密码与原密码一致')
                    }
                    const data = {
                        oldPassword: this.editPassworddata.oldPassword,
                        newPassword: this.editPassworddata.newPassword1,
                    };
                    const { data: res } = await this.$axios.post('/editPassword', data)
                    if (res.code === 401) return this.$message.error('原密码错误')
                    if (res.code !== 200) return this.$message.error('网络错误')
                    this.$message.success('修改成功')
                    this.updatePasswordhandleClose()
                })

            },
            // 添加教师
            async addteacher() {
                if (this.param.userNumber === null || this.param.userNumber === "") {
                    return this.$message("请完善数据")
                }
                if (this.param.username === null || this.param.username === "") {
                    return this.$message("请完善数据")
                }
                const { data: res } = await this.$axios.post("/addTeacher", this.param)
                if (res.code === 200) {
                    this.handleClose()
                    this.getTeachers()
                    return this.$message.success("添加成功")
                }
                if (res.code === 201) {
                    return this.$message.error("信息不全")
                }
                return this.$message.error("添加失败")
            },
            handleClose() {
                this.dialogVisible = false
                this.param = {
                    userNumber: null,
                    username: null
                }
            },

            // 清空学生数据
            async clearStudent() {
                const { data: res } = await this.$axios.get("/clearStudent")
                if (res.code === 200) {
                    this.$message.success("清除成功")
                    return this.dialogVisible_clearStudent = false
                }else if(res.code === 201){
                    this.$message("无权限")
                    return this.dialogVisible_clearStudent = false
                }else{
                    return this.$message.error("网络错误，删除失败")
                }
            },
        }
    }
</script>



<style lang="less" scoped>
    .baby {
        h3 {
            font-family: "微软雅黑";
            text-align: center;
            font-size: 26px;
            margin-bottom: 0px;
            padding-bottom: 0px;
        }

        margin: 10px 10px 0;

        .button {
            display: flex;
            justify-content: right;
            margin-bottom: 10px;
            margin-right: 20px;
        }
    }

    .el-dialog {
        .el-input {
            margin-bottom: 10px;
        }
    }
</style>